<script lang="ts">
export default {
    name: 'ApiList'
}
</script>

<script setup lang="ts">
import useApi from '@/composables/system/sysapi/useApi';
import useApiTable from '@/composables/system/sysapi/useApiTable';
import AddAndEidt from './AddAndEidt.vue';
import SysPagination from '@/components/SysPagination/index.vue';

// 表格列表
const { refreshTable, tableExpandAll, apiTable, listParam, getApiList, searchBtn, resetBtn, sizeChange, currentChange, tableExpand } = useApiTable()

const { addBtn, editBtn, delBtn, save, addEditRef, methodData } = useApi(getApiList)

</script>
<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="描述">
                <el-input v-model="listParam.description" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="listParam.path" placeholder="路径"></el-input>
            </el-form-item>
            <el-form-item label="请求">
                <el-select v-model="listParam.method" placeholder="请选择">
                    <el-option v-for="item in methodData.data" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['system:api:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true" class="search">
            <el-form-item>
                <el-button type="success" v-permission="['system:api:add']" icon="Plus" @click="addBtn('')">新增
                </el-button>
                <el-button type="default" icon="Sort" @click="tableExpand">展开折叠</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table v-if="refreshTable" :data="apiTable.list" row-key="id" border lazy stripe
            :default-expand-all="tableExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="path" label="路径"></el-table-column>
            <el-table-column prop="method" label="请求"></el-table-column>
            <el-table-column label="操作" align="center" width="250">
                <template #default="scope">
                    <el-button size="small" type="primary" v-permission="['system:api:edit']" icon="Edit"
                        @click="editBtn(scope.row)">编辑</el-button>
                    <el-button size="small" type="success" v-permission="['system:api:add']"
                        v-if="scope.row.parent_id == '0'" icon="Plus" @click="addBtn(scope.row.id)">新增
                    </el-button>
                    <el-button size="small" type="danger" v-permission="['system:api:delete']" icon="Delete"
                        @click="delBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <SysPagination :listParam="listParam" @sizeChange="sizeChange" @currentChange="currentChange"></SysPagination>
    </el-main>
    <!-- 新增或编辑弹框 -->
    <AddAndEidt ref="addEditRef" @save="save" :methodData="methodData"></AddAndEidt>
</template>
<style lang="scss" scoped>
</style>